<template>
    <div class="on-sale-good-car">
        <div class="search-content"></div>
        <div class="search-list">
            <el-table
                :data="categoryList"
                :height="oHeight"
                style="width: 100%"
                row-key="category_id"
                lazy
                :cell-style="cellStyle"
                :header-cell-style="headerStyle"
                :load="load"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren',
                }"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="排序" width="140" #default="{ row }" >
					<el-input
						class="inputCenter inputWidth60"
						v-model="row.category_sort"
						width="100"
						@blur="changeSort(row)"
					></el-input>
                </el-table-column>
                <el-table-column
                    prop="enable"
                    label="类目名称"
                    min-width="350"
                    #default="{ row }"
                >
                    <div class="power_name_box inputCenter" :style="sortStyle(row.deep)">
                        <el-input
                            class="input_box_name"
                            v-model="row.category_name"
                            @blur="changeName(row)"
                        ></el-input>
                        <div
                            class="new_add_next"
                            @click="addCategory('add',row.deep,row)"
                        >
                            <span>+</span>
                            <p>新增下级</p>
                        </div>
                    </div>
                </el-table-column>
                <el-table-column label="显示" width="180" #default="{ row }">
                    <el-switch
                        v-model="row.enable"
                        @change="
                            (val) => {
                                changeShow(val, row);
                            }
                        "
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                    >
                    </el-switch>
                </el-table-column>
                <el-table-column
                    prop="updatetime"
                    label="修改时间"
                    min-width="160px"
                    #default="{ row }"
                >
                    {{
                        (row.updatetime * 1000)
                            | dateFormatter("YYYY-MM-DD hh:mm:ss")
                    }}
                </el-table-column>
				<el-table-column
                    label="操作"
                    min-width="250px"
                    #default="{ row }"
                >
                    <el-button type="primary" @click="addCategory('edit',row.deep,row)">编辑</el-button>
                    <el-button type="danger" @click="delCategory(row)">删除</el-button>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="btn-group">
                    <el-button size="mini" type="primary" class="btn-bottom" @click="addCategory('add',0)">新增</el-button>
                    <!-- <el-button size="mini" type="primary" class="btn-bottom" @click="expertData">导出</el-button> -->
                    <!-- <button type="button" class="btn-bottom" @click="showDeleteDialog">删除</button> -->
                </div>
                <!--分页部分-->
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- <el-dialog
                :before-close="handleClose"
                title="提示"
                :visible="dialogVisible"
                width="30%">
            <span>{{dialogMsg}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelUnshelve">取 消</el-button>
                <el-button type="primary" @click="confirmUnshelve">确 定</el-button>
            </span>
        </el-dialog> -->
		<list-drawer ref="categoryDrawer"></list-drawer>
    </div>
</template>

<script>
import { resize } from "@/common/js/height.js";
import { objScreen } from "@/common/js/util";
import tableItem from './table-item'
import listDrawer from './category-drawer'
export default {
    data() {
        return {
            currentPage: 1,
            oHeight: 800,
            pageSize: localStorage.getItem('pageSize') * 1 || 10,
            oHeight: 800,
            categoryList: [],
            total: 0,
            needUnshelveGoods: null,
            dialogVisible: false,
            dialogMsg: ''
        }
    },
    components: {
		tableItem,
		listDrawer
    },
    computed: {

    },
    methods: {
		changeSort(row){
			this.editItem({
				parent_id:row.parent_id*1,
				brand_sort:row.category_sort,
				category_id:row.category_id
			})
		},
		changeName(row){
			this.editItem({
				parent_id:row.parent_id*1,
				category_name:row.category_name,
				category_id:row.category_id
			})
		},
		editItem(obj){
			this.$http.post('/admin/pointprod/index.php?act=pointCategory&op=update', obj).then((res)=>{
				if(res.code===1){
					this._message('success',res.msg);
				}else{
					this._message('error',res.msg);
				}
            },err=>{
				this._message('error',res.msg);
			})
		},
        sortStyle(deep) {
            let val = 0;
            if (deep == 2) {
                val = 16
            } else if (deep == 3) {
                val = 32
            }
            return { "padding-left": `${val}px` }
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex != 1&&columnIndex != 2) {
                return { "text-align": "center" };
            }
		},
		headerStyle({ row, column, rowIndex, columnIndex }) {
			return { "text-align": "center" };
			// if (columnIndex != 1&&columnIndex != 2) {
            //     return { "text-align": "center" };
            // }
		},
        load(tree, treeNode, resolve) {
            this.$http.get(`/admin/pointprod/index.php?act=pointCategory&op=list&parent_id=${tree.category_id}&pageSize=50`).then((res) => {
                if (res.code == 1) {
                    if (res.data && res.data.list.length) {
                        res.data.list.forEach((item) => { item.hasChildren = item.deep * 1 < 3 });
                        console.log('list', res.data.list)
                        resolve(res.data.list)
                    } else {
                        resolve([])
                    }
                } else {
                    resolve([]);
                    this._message('warning', res.msg)
                }
			})
			console.log('this',this)
        },
        changeShow(val, row) {
            let old = val == 1 ? '0' : '1'
            let obj = {
                category_id: row.category_id,
                enable: val
            }
            this.$http.post('/admin/pointprod/index.php?act=pointCategory&op=update', obj).then((res) => {
                if (res.code === 1) {
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                    setTimeout(() => { row.if_show = old; }, 100)
                }
            }, err => {
                this._message('error', res.msg);
                setTimeout(() => { row.if_show = old; }, 100)
            })
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
            this.pageSize = pageSize;
            this.currentPage = 1;
            this.getListData();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getListData();
		},
		addCategory(type,deep,row){
			this.$refs.categoryDrawer.show_dialog_fn(type,deep,row);
		},
		delCategory({category_id}){
			this.$http.get('/admin/pointprod/index.php?act=pointCategory&op=del&category_id='+category_id).then((res) => {
                if (res.code === 1) {
					this._message('success', res.msg);
					this.getListData();
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
		},
        getListData(id = 0) {
            var data = {
                page: this.currentPage,
                pageSize: this.pageSize
            };
            this.$http.get(`/admin/pointprod/index.php?act=pointCategory&op=list&parent_id=${id}`,{
				params:data
			}).then((res) => {
                if (res.code == 1) {
                    if (res.data && res.data.list.length) {
                        res.data.list.forEach((item) => { item.hasChildren = item.deep < 3 });
                        this.categoryList = res.data.list;
                        this.total = parseInt(res.data.totalCount);
                    } else {
                        this.goodsList = [];
                        this.total = 0;
                    }
                }
                else if (res.code == 2001) {
                    this.goodsList = [];
                    this.total = 0;
                }
                else {
                    this._message('error', res.msg);
                }
            })
        },

        handleClose() {
            this.cancelUnshelve();
        },
        cancelUnshelve() {
            this.dialogVisible = false;
            this.dialogMsg = '';
            this.needUnshelveGoods = null;
        },
        confirmUnshelve() {
            this.unshelveGoods(this.needUnshelveGoods);
            this.cancelUnshelve();
        },
    },
    mounted() {
        resize(this)
    },
    created() {
        this.$parent.tabLists = [
            { "label": "预约管理", "name": 'booking-index' }
        ]
        this.getListData();

    },
    name: "category-list"
}
</script>

<style lang="scss" scoped>
.on-sale-good-car {
    .search-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        &-input {
            width: 200px;
        }
        .putaway-time-wrapper {
            .putaway-time-label {
                font-size: 14px;
            }
            display: flex;
            align-items: center;
            /deep/.el-range-separator {
                box-sizing: content-box;
            }
        }
    }
}
.el-table {
    border: 1px solid #ebeef5;
    border-bottom: none;
}
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.power_name_box {
    display: flex;
    align-items: center;
    .input_box_name.el-input {
        width: auto;
    }
}
.new_add_next {
    display: flex;
    align-items: center;
    margin-left: 20px;
    color: #19b0df;
}
.new_add_next > span {
    width: 22px;
    height: 22px;
    background: #19b0df;
    color: #fff;
    text-align: center;
    line-height: 19px;
    font-size: 22px;
    border-radius: 5px;
}
.new_add_next > p {
    margin-left: 10px;
}
.inputCenter /deep/ .el-input__inner {
    text-align: center;
}
.inputWidth60 {
    width: 60px;
}
</style>